<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">


    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <link href="static/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet">
    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">



</head>

<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo-->
                    <div>
                        <a href="#" class="logo">
                            <img src="static/picture/logo-mi.png" class="logo-lg" alt="" height="60">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                          

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" href="http://localhost:3000" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static\picture\ai.png" alt="user" class="rounded-circle">
                                    </a>
                                    
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">话题</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">内容分析</a>
                                    </li>
                                    <li class="breadcrumb-item active">话题</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4 d-flex flex-row">
                            <div class="col-md-6 align-self-center" style="color:aliceblue">
                                <h6>查询每日详情:</h6>
                            </div>
                            <div class="float-right d-none d-md-block app-datepicker ml-auto">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">话题总数</h5>
                                    <h4 class="text-info pt-1 mb-0"><div id="count_contents"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">评论总数</h5>
                                    <h4 class="text-warning pt-1 mb-0"><div id="count_comment"></div></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">转发总数</h5>
                                    <h4 class="text-primary pt-1 mb-0"><div id="count_repost"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">点赞总数</h5>
                                    <h4 class="text-danger pt-1 mb-0"><div id="count_like"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->

    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                
                <!-- end row -->
                <div class="col-12">

                        <div id="search-container">
                            <center>
                            <h4 class="keyword-title">关键词搜索</h4>
                            </center>
                                <div class="search-box">
                                    <input type="text" id="topic-input" class="search-input" placeholder="输入关键词">
                                    <button onclick="searchTopics()"class="search-button" >查询</button>
                                </div>
                        </div>
            <div class="row">

                        <center>
                            <div class="card-body">
                            <div id="topic-results" style="margin-top: 30px;">
                                <!-- 这里将通过 JavaScript 动态显示查询结果 -->
                            </div></center>
                            <div class="col-12">
            
                                    <div id="timeline-container" style="display: none;margin-top: 50px;"></div>   
                            
                            </div>    
                        
    
            </div>
            <script src="static/js/axios.min.js"></script>
            <script src="static/js/vis.js"></script>
            <script src="https://d3js.org/d3.v7.min.js"></script>
            <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <!-- Plugins js -->
    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>

    <script src="static/js/bootstrap-maxlength.min.js"></script>
    <script src="static/js/jquery.bootstrap-touchspin.min.js"></script>
    <script src="static/js/app.js"></script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/echarts-wordcloud.js"></script>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
    // 找到日期选择器的元素
    const datepickerInput = document.getElementById('datepicker');

    // 设置日期为5月8日
    datepickerInput.value = 'May 08, 2024'; // 根据你的日期格式进行设置

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'MM dd, yyyy' // 日期格式要与显示格式一致
    });

    // 加载5月8日对应的数据
    loadData('2024-05-08');

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
});

               function searchTopics() {
  const topicInput = document.getElementById('topic-input').value.trim();

  if (topicInput === '') {
    alert('请输入关键词进行查询');
    return;
  }
  const apiUrl = `http://localhost:8080/hot/keytopic?topics=${encodeURIComponent(topicInput)}`;

  // 使用 Axios 发送 GET 请求获取话题数据
  axios.get(apiUrl)
    .then(function (response) {
      const topicsData = response.data; // 获取返回的话题数据
      console.log(response.data)

      // 如果话题数据为空,弹出提示框
      if (topicsData.length === 0) {
        alert('抱歉,没有找到相关的数据');
        return;
      }

      // 创建 Set 对象,用于存储去重后的话题
      const uniqueTopicsSet = new Set();

      // 遍历返回的话题数据,处理每个话题
      topicsData.forEach(function (item) {
        if (item.topic) {
          // 将话题字段按逗号分隔成数组
          const topicsArray = item.topic.split(',').map(topic => topic.trim());

          // 将话题数组中的每个话题添加到 Set 中(自动去重)
          topicsArray.forEach(topic => {
            uniqueTopicsSet.add(topic.replace(/'/g, '')); // 去掉单引号
          });
        }
      });

      // 将 Set 转换为数组,用于动态生成话题列表项
      const uniqueTopicsArray = Array.from(uniqueTopicsSet);

      // 清空现有的查询结果内容
      const topicResultsContainer = document.getElementById('topic-results');
      topicResultsContainer.innerHTML = '';

      // 遍历去重后的话题数组,动态生成话题列表项
      uniqueTopicsArray.forEach(function (topic) {
        const topicItem = document.createElement('div');
        topicItem.classList.add('topic-item');
        topicItem.textContent = topic;

        // 点击话题项显示对应内容
        topicItem.addEventListener('click', function () {
          showTopicDetails(topic);
        });

        topicResultsContainer.appendChild(topicItem);
      });

      // 显示查询结果容器,并隐藏时间线容器
      topicResultsContainer.style.display = 'block';
      document.getElementById('timeline-container').style.display = 'none';
    })
    .catch(function (error) {
      console.error('Error:', error);
      alert('抱歉,查询时发生错误,请稍后重试');
    });
}
            
                function showTopicDetails(topic) {
    console.log(topic);

    const apiUrl = `http://localhost:8080/hot/topiccontents?topic=${encodeURIComponent(topic)}`;
    const timelineContainer = document.getElementById('timeline-container');

    // 使用 Axios 发送 GET 请求获取话题详情数据
    axios.get(apiUrl)
        .then(function (response) {
            const topicDetails = response.data; // 获取返回的话题详情数据

            // 清空现有的查询结果内容
            timelineContainer.innerHTML = '';

            // 创建时间线元素
            const timeline = document.createElement('div');
            timeline.className = 'timeline';
            timeline.style.display = 'flex';
            timeline.style.flexDirection = 'column';
            timeline.style.alignItems = 'center';

            // 遍历话题详情数据，动态生成时间线内容
            topicDetails.forEach(function (detail, index) {
                const timelineItem = document.createElement('div');
                timelineItem.className = 'timeline-item';
                timelineItem.style.display = 'flex';
                timelineItem.style.alignItems = 'center';
                timelineItem.style.marginBottom = '40px';
                timelineItem.style.width = '80%'; // 设置时间线项目的固定宽度

                const timelineBadge = document.createElement('div');
                
                timelineBadge.style.backgroundColor = '#4CAF50';
                timelineBadge.style.color = '#fff';
                timelineBadge.style.width = '30px'; // 缩小序号的宽度
                timelineBadge.style.height = '30px'; // 缩小序号的高度
                timelineBadge.style.lineHeight = '30px'; // 调整序号文字的垂直居中
                timelineBadge.style.textAlign = 'center';
                timelineBadge.style.borderRadius = '50%';
                timelineBadge.style.marginRight = '20px';
                timelineBadge.textContent = index + 1;

                const timelineContent = document.createElement('div');
                timelineContent.className = 'timeline-content';
                timelineContent.style.flex = '1';
                timelineContent.style.backgroundColor = '#f5f5f5';
                timelineContent.style.padding = '20px';
                timelineContent.style.borderRadius = '10px';
                timelineContent.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.1)';

                const date = new Date(detail.date);
                const content = `<h3 style="margin-top: 0; margin-bottom: 10px;">${detail.user_name}</h3><p style="margin-bottom: 10px;">发布时间：${date.toLocaleString()}</p><p style="margin-bottom: 0;">${detail.contents}</p>`;
                timelineContent.innerHTML = content;

                timelineItem.appendChild(timelineBadge);
                timelineItem.appendChild(timelineContent);

                timeline.appendChild(timelineItem);
            });

            timelineContainer.appendChild(timeline);

            // 显示时间线容器，并隐藏其他容器
            timelineContainer.style.display = 'block';
            document.getElementById('topic-results').style.display = 'none';
            document.getElementById('timeline-container').scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到时间线容器
        });
}
            </script>
    <!-- End Footer -->



    <!-- App js -->
    <!-- <script src="static/js/app.js"></script> -->
    <script>
    // const countDate = '2024-05-08'
    document.addEventListener("DOMContentLoaded", function() {
const datepickerInput = document.getElementById('datepicker');

// 初始化日期选择器
$(datepickerInput).datepicker({
    autoclose: true,
    todayHighlight: true,
    format: 'yyyy-mm-dd' // 日期格式要与后端API期望的格式一致
});

// 获取默认日期
// const defaultDate = getDefaultDate();
const defaultDate = '2024-05-08';

// 加载默认日期对应的数据
loadData(defaultDate);

// 监听日期选择变化事件
$(datepickerInput).on('changeDate', function(e) {
    const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
    loadData(selectedDate); // 加载新日期对应的数据
});

// 获取默认日期的函数
function getDefaultDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
    const day = today.getDate().toString().padStart(2, '0'); // 日补零
    return `${year}-${month}-${day}`;
}

// 加载数据的函数
function loadData(date) {
    const apiUrl = `http://localhost:8080/hot/countlist?Date=${date}`;

    // 发起GET请求获取数据
    axios.get(apiUrl)
        .then(response => {
            const countList = response.data[0];

            // 更新页面上对应的数据显示
            updateDataDisplay(countList);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            // 处理请求错误
            const emptyData = {
                count_comment: 0,
                count_repost: 0,
                count_like: 0,
                count_contents: 0
            };
            updateDataDisplay(emptyData);
        });
}

// 更新数据显示的函数
function updateDataDisplay(data) {
    const commentElement = document.getElementById('count_comment');
    const repostElement = document.getElementById('count_repost');
    const likeElement = document.getElementById('count_like');
    const contentsElement = document.getElementById('count_contents');

    commentElement.innerText = data.count_comment || 0;
    repostElement.innerText = data.count_repost || 0;
    likeElement.innerText = data.count_like || 0;
    contentsElement.innerText = data.count_contents || 0;
}
});

</script>

</body>

<style>
        /* 自定义样式 */    
    .detail-item {
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .detail-item h3 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    .detail-item p {
        margin-top: 0;
        margin-bottom: 5px;
    }
    .topic-item {
        display: inline-block;
        margin: 10px;
        padding: 10px 20px;
        border-radius: 20px;
        background-color: #93b5d8;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    .topic-item:hover {
        background-color: #0056b3;
    }

    .topic-content {
        display: none;
        padding: 20px;
        margin-top: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #f8f9fa;
    }
    .search-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .search-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .search-input {
        border: 2px solid #ccc;
        border-radius: 20px;
        padding: 8px 16px;
        width: 500px;
    }

    .search-button {
        background-color: #007bff;
        color: white;
        border: 2px solid #007bff;
        border-radius: 20px;
        padding: 8px 16px;
        margin-left: 10px;
        cursor: pointer;
    }

    .search-button:hover {
        background-color: #0056b3;
    }

    .search-results {
        width: 600px;
    }

    .search-header {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .sub-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
    }


</style>
<style>
    .timeline {
      position: relative;
      padding: 0;
      list-style: none;
    }
    
    .timeline:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 40px;
      width: 2px;
      margin-left: -1.5px;
      background-color: #e9ecef;
    }
    
    .timeline-item {
      margin: 0;
      padding-bottom: 20px;
      position: relative;
    }
    
    .timeline-item:last-child {
      padding-bottom: 0;
    }
    
    .timeline-badge {
      color: #fff;
      width: 30px;
      height: 30px;
      line-height: 20px;
      font-size: 1.4em;
      text-align: center;
      position: absolute;
      top: 0px;
      left: 30px;
      transform: translateX(-50%);
      background-color: #3e75a5;
      border-radius: 50%;
      box-shadow: 0 0 0 5px #fff;
    }
    
    .timeline-content {
      padding-left: 80px;
    }
    
    .timeline-content h3 {
      margin-top: 0;
      font-size: 1.5em;
    }
    
    .timeline-content p,
    .timeline-content time {
      margin-bottom: 0;
      font-size: 0.9em;
    }
    </style>
</html>